require('../../less/controls/form.less');
var React = require('react');
var FormItem = require('./FormItem');
module.exports = React.createClass({
	displayName:'Form',
	getInitialState:function(){
		return {
			hiddens: this.props.hiddens||{},
			value: this.props.value,
			text: this.props.text
		}
	},
	componentDidMount:function(){
		this._children.map(function (item, index){
			item.props.form = this;
			item.props.index = index;
		}.bind(this));
		//var _iframe = this.refs.iframe.getDOMNode();
		//console.log(_iframe);
	},
	__onItemDidMount: function (item){
		item.pre = this.curr;
		if(this.curr) { this.curr.next = item; }
		this.curr = item;
		this._items.push(item);
	},
	__itemRender: function (item, index){
		var _content = null
		item.bWidth = (item.bWidth || this.props.itemBWidth);
		item.hWidth = (item.hWidth || this.props.itemHWidth);
		if(this.props.itemRender){
			_content = this.props.itemRender(item, index);
		}
		if(!_content){
			_content = <FormItem key={index} {...item} onFormItemDidMount={this.__onItemDidMount} />;
		}
		return _content;
	},
	validate: function (){
		var _data = {},
			_value = null;
		for(var i = 0, _len = this._items.length; i<_len; i++){
			_value = this._items[i].validate();
			if(_value){
				_data[_value.name] = _value.value||'';
			} else {
				return false;
			}
		}

		return _data;
	},
	submit: function (){
		var _result = this.validate();
		if(_result === false){
			return false;
		}
		for(var key in this.state.hiddens){
			_result[key] = _result[key] || this.state.hiddens[key];
		}
		_result = (this.props.onSubmitBefore && this.props.onSubmitBefore(_result, this))||_result;
		if(this.props.syncSubmit){
			this.getDOMNode().submit();
		} else {
			Store.init(this.props.action, _result, this.props.method).exec().then(function (data){
				if(data.status==200){
					this.props.onSubmitSuccess && this.props.onSubmitSuccess(data);
				}else {
					this.props.onSubmitError && this.props.onSubmitError(data);
				}
			}.bind(this), function (data){
				this.props.onSubmitError && this.props.onSubmitError(data);
			}.bind(this));
		}
	},
	setHidden: function (key, value){
		this.state.hiddens[key] = value;
		this.setState({
			hiddens: this.state.hiddens
		});
	},
	__onIFrameLoad: function (event){
		var _target = event.target,
			_data = '';
		if (_target.contentWindow) {
			_data = _target.contentWindow.document.body ? _target.contentWindow.document.body.innerHTML : null;
        } else if (_target.contentDocument) {
			_data = _target.contentDocument.document.body ? _target.contentDocument.document.body.innerHTML : null;
        }
	},
	render:function(){
		this._items = [];
		this._children = this.props.children.length!==undefined?this.props.children:[this.props.children];
		var _hiddens = this.state.hiddens||{};
		return (
			<form
				className={"c-form layout-"+(this.props.layout||'inline')}
				target="upload-target"
				action={this.props.action}
				encType="multipart/form-data"
				method={this.props.method}
				style={this.props.style}>
				{
					this.props.syncSubmit && <iframe onLoad={this.__onIFrameLoad} className="upload-target" name="upload-target" />
				}
				{
					this.props.items && this.props.items.map(this.__itemRender)
				}
				{
					this.props.syncSubmit && Object.keys(_hiddens).map(function (hidden, index){
						return <input key={'hidden_' + index} type="hidden" name={hidden} value={_hiddens[hidden]} />;
					})
				}
				{this._children}
			</form>
		);
	}
});
